<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div style="display: flex;">
            <div class="whead">
              <div class="left">所属水库 :</div>
              <!-- 
                        <el-select v-model="formInline" placeholder="活动区域" style="width: 240px;">
               
                            <el-option v-for="item in listData" :key="item.id" :label="item.cityName" :value="item.cityCode"></el-option>
                        </el-select> -->

              <el-select
                v-model="city"
                placeholder="全部"
                @change="cityChange(city)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </div>
            <div class="whead">
              <div class="left">工单来源 :</div>
              <el-select
                v-model="workOrder"
                placeholder="全部"
                @change="workorderChange(workOrder)"
              >
                <el-option
                  v-for="item in sources"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div class="whead">
              <div class="left">工单状态 :</div>
              <el-select
                v-model="staty"
                placeholder="全部"
                @change="statusChange(staty)"
              >
                <el-option
                  v-for="item in statu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div>
              <el-button type="primary" @click="btnSearch">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 20px;">
          <el-button
            v-on:click="exportBtn()"
            class="el-icon-upload"
            type="primary"
            size="small "
            >导出数据</el-button
          >
        </div>
      </div>

      <div></div>
      <div>
        <!-- 表格 -->
        <el-table
          border
          ref="multipleTable"
          :data="listData"
          style="width: 100%"
          align="center"
          @selection-change="selRow"
          :row-key="getRowKeys"
        >
          <el-table-column
            type="selection"
            width="120px"
            align="center"
            :reserve-selection="true"
          ></el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyNo"
            label="智能渔方编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyName"
            label="智能渔方名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reservoirName"
            label="所属水库"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="source"
            label="工单来源"
            align="center"
          ></el-table-column>
          <el-table-column label="应投渔苗" align="center">
            <template slot-scope="scope">
              <div v-for="item in scope.row.fryInfo" :key="item.index">
                <div>{{ item.fryName }}:{{ item.weight }}斤</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="工单创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            label="工单更新时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyStockNum"
            label="工单状态"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">待投放</div>
              <div v-if="scope.row.status == 1">已投放</div>
              <div v-if="scope.row.status == 2">已关闭</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 0"
                @click="handleClick(scope.row.id)"
                type="primary"
                size="small"
                >标记为已投</el-button
              >
              <el-button
                v-if="scope.row.status == 1"
                type="success"
                size="small"
                >已投放</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="removeByIdFish(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="changClick(value1)"
            style="margin: 0 auto;"
          >
          </el-date-picker>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickConfirm">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分页器 -->
        <el-checkbox
        style="margin:10px 2.2%;"
          label="全选"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="selAll()"
        ></el-checkbox>

        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  fryLaunchWork,
  exportFryWorkOrderExcel,
  removeByIdFish,
  lunchFry,
  reservoir
} from "@/api/user";
import { Toast } from "vant";

export default {
  data() {
    return {
      centerDialogVisible: false,
      value1: "",
      selectedAssetsList: [],
      assetsUidList: [],
      isIndeterminate: false, //对el-checkbox控制不完整的全选状态
      checkAll: false, //对el-checkbox控制全选状态
      newTabledata: [],
      input: "", //搜索
      phone: "", //手机号搜索
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      workOrder: "", // 工单来源
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      chargePhone: "", //负责人手机号
      reservoirId: "", //ID
      source: 0, //工单来源：0.所有 1.智能渔方租赁 2.鱼苗补充
      status: -1, //工单状态： -1.所有 0.待投放 1.已投放 2.已关闭
      formInline: "",
      form: {
        code: "",
        name: ""
      },
      value: "",
      options: [],
      statu: [
        {
          value: 0,
          label: "待投放"
        },
        {
          value: 1,
          label: "已投放"
        },
        {
          value: 2,
          label: "已关闭"
        }
      ],
      sources: [
        {
          value: 1,
          label: "智能渔方租赁"
        },
        {
          value: 2,
          label: "鱼苗补充"
        }
      ]
    };
  },

  created() {
    this.reservoirList();
    this.fryLaunchWork(this.pageSize, this.currentPage);

    let formatDate = function(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    };
    this.value1 = formatDate(new Date());
    this.lunchDate = this.value1;
    this.search();
  },

  methods: {
    getRowKeys(row) {
      // id 是后台传递的每行信息唯一标识
      return row.id;
    },
    search() {
      this.listData = this.newTabledata.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    //全选按键功能实现
    selAll() {
      if (
        this.$refs.multipleTable.selection.length < this.newTabledata.length
      ) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      if (this.checkAll) {
        this.newTabledata.forEach(row => {
          if (row.status == 0) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        this.selectedAssetsList = [];
        this.assetsUidList = [];
      }
    },
    stateChange() {
      var vm = this;
      if (
        vm.assetsUidList.length < this.newTabledata.length &&
        vm.assetsUidList.length > 0
      ) {
        this.isIndeterminate = true;
      } else if (vm.assetsUidList.length == this.newTabledata.length) {
        this.isIndeterminate = false;
        this.checkAll = true;
      } else if (vm.assetsUidList.length == 0) {
        this.isIndeterminate = false;
        this.checkAll = false;
      }
    },
    //表格内checkbox触发的全选按钮状态变化
    selRow(val) {
      const vm = this;
      vm.selectedAssetsList = Array.from(
        new Set([...vm.selectedAssetsList, ...val])
      );
      // 选择的行的完整数据。
      const currentArr = val.map(item => item.id);
      const arr1 = [...vm.assetsUidList, ...currentArr];
      vm.assetsUidList = Array.from(new Set(arr1));
      const tableData = vm.listData.map(item => item.id);
      const difference = tableData.filter(v => !currentArr.includes(v));
      difference.forEach(item => {
        if (vm.assetsUidList.indexOf(item) !== -1) {
          vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1);
        }
      });

      // 把选中的行数据进行去重。
      var list = vm.selectedAssetsList.filter(
        item => vm.assetsUidList.indexOf(item.id) != -1
      );
      for (var i = 0; i < list.length; i++) {
        for (var j = i + 1; j < list.length; j++) {
          if (list[i].id == list[j].id) {
            list.splice(j, 1);
            j--;
          }
        }
      }
      setTimeout(() => {
        this.stateChange();
      }, 0);
    },
    //         //多选后数据变化
    // handleSelectionChange(val) {
    //     val.forEach(row=>{
    //         if(row.status==0){
    //             this.multipleSelection = val;
    //         }else{
    //             return;
    //         }
    //     })
    //   console.log(this.multipleSelection);
    // },
    // //全选按钮
    // SelectAll(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //         if(row.status==0){
    //             this.$refs.multipleTable.toggleRowSelection(row);
    //         }
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection(); //清除全选
    //   }
    // },
    // 水库列表
    async reservoirList() {
      let data = {
        enableStatus: -1,
        limit: -1,
        page: 1
      };
      let result = await reservoir(data);
      if (result.code == 0) {
        let lintInfo = result.data.records;
        lintInfo.forEach(item => {
          this.options.push({ name: item.name, code: item.id });
        });
      }
    },
    // 导出数据
    async exportBtn() {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        reservoirId: this.reservoirId,
        source: this.source,
        status: this.status
      };
      let result = await exportFryWorkOrderExcel(data);
      if (result.code == 0) {
        // 下载文件
        window.location.href =
          process.env.VUE_APP_BASE_API +
          "/file/export/exportInfo?fileName=" +
          result.data;
      }
    },
    // 时间
    changClick(e) {
      this.lunchDate = this.value1;
    },
    async clickConfirm() {
      let data = {
        workOrderId: this.workOrderId,
        lunchDate: this.lunchDate
      };

      let result = await lunchFry(data);
      if (result.code == 0) {
        this.fryLaunchWork();
        this.centerDialogVisible = false;
        setTimeout(() => {
          Toast.success(result.message);
        }, 1000);
      }
    },
    // 删除工单
    async removeByIdFish(e) {
      let data = {
        workOrderId: e
      };
      let result = await removeByIdFish(data);
      if (result.code == 0) {
        this.fryLaunchWork(this.pageSize, this.currentPage);
        Toast.success("删除成功");
      } else {
        Toast.fail("删除失败");
      }
    },
    // 标记为已投
    handleClick(e) {
      this.centerDialogVisible = true;
      this.workOrderId = e;
      // console.log('标记', e);
      // let data = {
      //     workOrderId: e
      // }

      // let result = await lunchFry(data)
      // console.log(result);
    },
    async fryLaunchWork(limit, page) {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        reservoirId: this.reservoirId,
        source: this.source,
        status: this.status,
        phoneNumber: this.chargePhone
      };
      let result = await fryLaunchWork(data);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.newTabledata = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
        result.data.records.forEach(element => {
          element.source = 1 ? "智能渔方租赁" : "渔苗补充";
          element.fryInfo = JSON.parse(element.fryInfo);
        });

        //  去重
        // var obj = {};
        // this.options = this.options.reduce(function (item, next) {
        //     obj[next.key] ? '' : obj[next.key] = true && item.push(next);
        //     return item;
        // }, []);
        // console.log('循环', this.options);
      }
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fryLaunchWork(this.pageSize, this.currentPage);
      this.search();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fryLaunchWork(this.pageSize, this.currentPage);
      this.search();
    },
    //  搜索水库编号
    btnchange(e) {
      this.reservoirNo = e;
      this.fryLaunchWork(this.pageSize, this.currentPage);
    },
    //水库名称
    phoneChange(e) {
      this.reservoirName = e;
      this.fryLaunchWork(this.pageSize, this.currentPage);
    },
    // 城市搜索
    cityChange(e) {
      this.reservoirId = e;
      this.fryLaunchWork(this.pageSize, this.currentPage);
    },
    // 工单状态搜索
    statusChange(e) {
      this.status = e;
      this.fryLaunchWork(this.pageSize, this.currentPage);
    },
    // 工单来源
    workorderChange(e) {
      this.source = e;
      this.fryLaunchWork(this.pageSize, this.currentPage);
    },
    // 搜索按钮
    btnSearch(e) {
      this.fryLaunchWork(this.pageSize, this.currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  margin-right: 10px;
}
::v-deep .el-dialog--center .el-dialog__body {
  text-align: center;
  padding: 25px 25px 30px;
  /* margin: 0 auto; */
}

.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
